<template>
  <div class="category-style">
    <!-- 商品分类 -->
    <van-nav-bar @click-right="onClickRightSetCategory">
      <span slot="right" class="span-style">{{category}}</span>
      <span slot="left">分类 </span>
      <van-icon name="arrow" slot="right" />
    </van-nav-bar>
    <!-- 商品价格 -->
    <van-nav-bar @click-right="onClickRightSetPrice">
      <span slot="left" >价格</span>
      <span slot="right"  class="span-style">开个价 </span>
      <van-icon name="arrow" slot="right"/>
    </van-nav-bar>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { mapMutations ,mapState} from 'vuex'
  import { NavBar } from 'vant';
  import { Icon } from 'vant';
  Vue.use(Icon);
  Vue.use(NavBar);
  export default{
    name:'Category',
    methods: {
      onClickLeft() {

      },
      onClickRightSetCategory() {
        this.$router.push({
          path:'/sell/categorylist'
        })
      },
      onClickRightSetPrice(){
        this.changeShow()
      },
      ...mapMutations({
        changeShow:'changeShow'
      })
    },
    computed:{
      ...mapState({
        // 将state中的category映射到choosecategory
        category:state=>state.category,
      })
    }
  }
</script>

<style scoped="scoped">
  .span-style{
    color: #1989fa;
  }
</style>
